<template>
  <div class="container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>个人信息</span>
        <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
      </div>
      <el-descriptions :column="4" border>
        <el-descriptions-item
          label="用户名"
          label-class-name="my-label"
          content-class-name="my-content"
          >{{ StudentInfo.stuName }}</el-descriptions-item
        >
        <el-descriptions-item label="性别">{{
          StudentInfo.stuSex == 1 ? "男" : "女"
        }}</el-descriptions-item>
        <el-descriptions-item label="年龄">{{
          StudentInfo.stuAge
        }}</el-descriptions-item>
        <el-descriptions-item label="学号">{{
          StudentInfo.stuNum
        }}</el-descriptions-item>
        <el-descriptions-item label="年级">{{
          StudentInfo.stuGrade
        }}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{
          StudentInfo.stuPhone
        }}</el-descriptions-item>
        <el-descriptions-item label="居住地">{{
          StudentInfo.stuAddress
        }}</el-descriptions-item>

        <el-descriptions-item label="专业">
          <el-tag size="small">{{ StudentInfo.stuMajor }}</el-tag>
        </el-descriptions-item>
        <!-- <el-descriptions-item label="联系地址" :contentStyle="{'text-align': 'right'}">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item> -->
      </el-descriptions>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>初访信息</span>
        <el-button style="float: right; padding: 3px 0" type="text"
          >历史记录</el-button
        >
      </div>
      <div class="text item">
        <el-table
          ref="tableList"
          :data="studentList"
          style="width: 100%"
          :row-class-name="tableRowClassName"
          @expand-change="expandChange"
          :row-key="getRowKeys"
          :expand-row-keys="expands"
        >
          <el-table-column type="expand">
            <!-- -------------- -->
            <!-- element正确形式 -->
            <!-- eslint-disable-next-line -->
            <template slot-scope="scope">
              <el-table
                style="width: 100%"
                :row-class-name="tableRowClassName"
                :data="ConsultList"
              >
                <el-table-column
                  prop="consultDate"
                  label="咨询日期"
                  width="200"
                >
                </el-table-column>
                <el-table-column
                  prop="consultTime"
                  label="咨询时间"
                  width="200"
                >
                </el-table-column>
                <el-table-column
                  prop="consultRoom"
                  label="咨询地址"
                  width="200"
                >
                </el-table-column>
                <el-table-column
                  prop="adminInfo.adminName"
                  label="咨询教师"
                  width="210"
                >
                </el-table-column>

                <el-table-column
                  prop="adminInfo.adminPhone"
                  label="联系方式"
                  width="210"
                >
                </el-table-column>
                <el-table-column
                  prop="consultConclusion"
                  label="咨询结论"
                  width="200"
                >
                </el-table-column>
                <el-table-column
                  prop="consultResultCrisisStatus"
                  label="咨询状态"
                  width="200"
                >
                  <template slot-scope="scope">
                    <span v-if="scope.row.consultResultCrisisStatus == 0"
                      >咨询中</span
                    >
                    <span v-if="scope.row.consultResultCrisisStatus == 1"
                      >咨询完成</span
                    >
                    <span v-if="scope.row.consultResultCrisisStatus == 2"
                      >待咨询</span
                    >
                  </template>
                </el-table-column>
                <!-- 
                <el-table-column label="操作" align="center" width="120px">
                  <template slot-scope="scope">
                    <el-tooltip
                      class="item"
                      effect="dark"
                      content="详细信息"
                      placement="top"
                      :enterable="false"
                    >
                      <el-button
                        @click="showConsultInfo(scope.row)"
                        type="success"
                        size="mini"
                        icon="el-icon-more-outline"
                        circle
                      ></el-button>
                    </el-tooltip>
                  </template>
                </el-table-column> -->
              </el-table>
            </template>
          </el-table-column>
          <el-table-column prop="visitDate" label="日期" width="100">
          </el-table-column>
          <el-table-column prop="visitTime" label="具体时间" width="100">
          </el-table-column>
          <el-table-column prop="visitRoom" label="地址" width="200">
          </el-table-column>

          <el-table-column
            prop="visitCrisisGrades"
            label="问卷得分"
            width="200"
          >
          </el-table-column>
          <el-table-column
            prop="adminInfo.adminName"
            label="初访教师"
            width="200"
          >
          </el-table-column>
          <el-table-column prop="visitConclusion" label="初访寄语" width="150">
          </el-table-column>
          <el-table-column prop="visitStatus" label="初访状态" width="120">
            <template slot-scope="scope">
              <span v-if="scope.row.visitStatus == 0">待初访</span>
              <span v-if="scope.row.visitStatus == 1">初访中</span>
              <span v-if="scope.row.visitStatus == 2">初访完成</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="visitResultCrisisStatus"
            label="初访结论"
            width="100"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.visitResultCrisisStatus == 0"
                >转介送诊</span
              >
              <span v-if="scope.row.visitResultCrisisStatus == 1"
                >安排咨询</span
              >
              <span v-if="scope.row.visitResultCrisisStatus == 2"
                >无需咨询</span
              >
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            width="200px"
            prop="visitStatus"
          >
            <template slot-scope="scope">
              <el-tooltip
                v-if="
                  scope.row.visitStatus == 2 &&
                  scope.row.visitResultCrisisStatus == 1
                "
                content="发起咨询"
                class="item"
                effect="dark"
                placement="top"
                :enterable="false"
              >
                <el-button
                  type="primary"
                  size="mini"
                  @click="Apply(scope.row)"
                  icon="el-icon-s-comment"
                  circle
                ></el-button>
              </el-tooltip>
              <!-- 修改 -->
              <el-tooltip
                content="修改"
                class="item"
                effect="dark"
                placement="top"
                :enterable="false"
              >
                <el-button
                disabled
                  type="primary"
                  size="mini"
                  @click="showEditDialog(scope.row)"
                  icon="el-icon-edit"
                  circle
                ></el-button>
              </el-tooltip>

              <el-tooltip
                class="item"
                effect="dark"
                content="详细信息"
                placement="top"
                :enterable="false"
              >
                <el-button
                  @click="showSysUserById(scope.row)"
                  type="success"
                  size="mini"
                  icon="el-icon-more-outline"
                  circle
                ></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>

    <el-drawer
      title="初访信息"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"
      custom-class="adrawer"
    >
      <el-descriptions :column="2" border>
        <el-descriptions-item
          label="姓名"
          label-class-name="my-label"
          content-class-name="my-content"
          >{{ UserVisitInfo.userInfo.stuName }}</el-descriptions-item
        >

        <el-descriptions-item
          label="初访时间"
          label-class-name="my-label"
          content-class-name="my-content"
          >{{ UserVisitInfo.visitTime }}</el-descriptions-item
        >
        <el-descriptions-item
          label="初访地址"
          label-class-name="my-label"
          content-class-name="my-content"
          >{{ UserVisitInfo.visitRoom }}</el-descriptions-item
        >
        <el-descriptions-item
          label="初访结论"
          label-class-name="my-label"
          content-class-name="my-content"
          >{{ UserVisitInfo.visitResultCrisisStatus }}</el-descriptions-item
        >
        <el-descriptions-item
          label="问卷得分"
          label-class-name="my-label"
          content-class-name="my-content"
          >{{ UserVisitInfo.visitCrisisGrades }}</el-descriptions-item
        >
        <el-descriptions-item
          label="个人描述"
          label-class-name="my-label"
          content-class-name="my-content"
          >{{ UserVisitInfo.userCrisisText }}</el-descriptions-item
        >
        <el-descriptions-item label="年龄">{{
          UserVisitInfo.userInfo.stuAge
        }}</el-descriptions-item>
        <el-descriptions-item
          label="初访教师姓名"
          label-class-name="my-label"
          content-class-name="my-content"
          >{{ UserVisitInfo.adminInfo.adminName }}</el-descriptions-item
        >
        <el-descriptions-item label="教师手机号">{{
          UserVisitInfo.adminInfo.adminPhone
        }}</el-descriptions-item>

        <!-- <el-descriptions-item label="联系地址" :contentStyle="{'text-align': 'right'}">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item> -->
      </el-descriptions>
    </el-drawer>

    <el-dialog
      title="请填写咨询信息"
      :visible.sync="dialogVisible"
      width="20%"
      @close="close()"
    >
      <el-form
        :rules="rules"
        ref="AddConsultInfo"
        :model="AddConsultInfo"
        label-width="80px"
      >
        <!-- <el-form-item label="咨询老师" prop="consult_admin_id">
                    <el-select v-model="AddConsultInfo.consult_admin_id" placeholder="请选择值班老师">
                        <el-option v-for="item in teacherList" :key="item.adminId" :value="item.adminName"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="咨询地点" prop="consult_room">
                    <el-select v-model="AddConsultInfo.consult_room" placeholder="请选择值班地点">
                        <el-option value="宜宾校区b8a413"></el-option>
                        <el-option value="汇南校区翻斗教室414"></el-option>
                        <el-option value="宜宾校区智慧楼101"></el-option>
                    </el-select>
                </el-form-item> -->
        <el-form-item label="咨询周" prop="consultDate">
          <el-select
            v-model="AddConsultInfo.consultDate"
            placeholder="请选择值班周"
          >
            <el-option value="周一"></el-option>
            <el-option value="周二"></el-option>
            <el-option value="周三"></el-option>
            <el-option value="周四"></el-option>
            <el-option value="周五"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="咨询时间" prop="consultTime">
          <el-select
            v-model="AddConsultInfo.consultTime"
            placeholder="请选择值班时间"
          >
            <el-option value="8:00-10:00"></el-option>
            <el-option value="10:00-12:00"></el-option>
            <el-option value="14:00-16:00"></el-option>
            <el-option value="16:00-18:00"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close()">取 消</el-button>
        <el-button type="primary" @click="addSubmit()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { findAdminByNameApI } from "@/api/Admin/admin";
import { reqGetConsultTotal, reqAddConsult } from "@/api/Consultation/index";
import { reqGetConsultByVisit, reqGetConsultInfo } from "@/api/Student/index";
import { reqGetInitiaTotal } from "@/api/InitiaVisit/index";
export default {
  data() {
    return {
      expands: [],
      getRowKeys(row) {
        return row.visitId;
      },
      StudentInfo: this.$store.state.stuInfo || [],
      studentList: [],
      ConsultList: [],
      //仅仅用来获取咨询列表
      ConsultInfo: {},
      // teacherList: [],
      UserVisitInfo: {
        userInfo: {
          stuName: "",
          stuAge: "",
          stuSelfcrisis: "",
        },
        adminInfo: {
          consult_admin_id: "",
          adminPhone: "",
          adminName: "",
        },
        visitDate: "",
        userCrisisText: "",
        visitTime: "",
        visitRoom: "",
        visitResultCrisisStatus: "",
        visitCrisisGrades: "",
      },
      AddConsultInfo: {
        visitId: "",
        stuId: "",
        stuNum: "",
        consultDate: "",
        consultTime: "",
        consultRoom: "",
        adminInfo: {
          adminName: "",
        },
      },
      drawer: false,
      direction: "ttb",
      dialogVisible: false,
      rules: {
        consultDate: [
          { required: true, message: "请选择值班周", trigger: "change" },
        ],
        consultTime: [
          { required: true, message: "请选择值班时间", trigger: "change" },
        ],
      },
    };
  },
  computed: {
    stuNum() {
      return this.$store.state.stuInfo.stuNum || [];
    },
    stuName() {
      return this.$store.state.stuInfo.stuName || [];
    },
    stuId() {
      return this.$store.state.stuInfo.stuId || [];
    },
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      // console.log('yanse',row)
      // console.log('yanse',rowIndex)
      if (row.visitStatus == 1) {
        return "success-row";
      }
      return "";
    },
    //获取全部咨询信息，没有用上
    async SelectStuConsult() {
      this.consultInfo = {
        userInfo: {
          stuAddress: "",
          stuMajor: "",
          stuName: "",
        },
        adminInfo: {
          consult_admin_id: "",
        },
        consultConclusion: "",
        consultStatus: "",
        consultTeacher: "",
        consultTime: "",
        stuNum: this.stuNum,
      };
      const { data: res } = await reqGetConsultTotal(this.consultInfo);
      //   this.ConsultList=res
      console.log("全部咨询", res);
    },
    //获取初访信息
    async GetConsultInfo() {
      this.visitInfo = {
        userInfo: {
          stuName: "",
          stuAddress: "",
          stuMajor: "",
          stuNum: this.stuNum,
        },
        stuNum: this.stuNum,
        auditStatu: "",
        visitStatus: "",
        visitConclusion: "",
        visitTime: "",
        adminInfo: {
          consult_admin_id: "",
        },
        visitDate: "",
        visitTime: "",
      };
      const res = await reqGetInitiaTotal(this.visitInfo);
      if (res.code == 0) {
        console.log("初访", res.data);
        this.studentList = res.data;
      } else {
        this.$message.error("查询失败！！");
      }
    },
    //获取老师列表(被砍了)
    //     async GetTeacherList() {
    //   const { data: res }=await findAdminByNameApI('咨询师')

    // if(res.code==0){
    //    this.teacherList = res.data.filter(i => i.adminWorkStatus == 0)
    //   console.log('1111',this.teacherList)
    //   console.log('1111',res.data)
    // }else{
    //   this.$message.error("获取教师列表失败")
    // }
    //     },
    async expandChange(row, expandedRows) {
      this.rowData = [];
      var that = this;
      if (expandedRows.length) {
        that.expands = [];
        if (row) {
          that.expands.push(row.visitId);
        }
      } else {
        that.expands = [];
      }
      this.ConsultList = [];
      const { data: res } = await reqGetConsultByVisit(row.visitId);
      if (res.code == 0) {
        console.log("咨询", res);
        this.ConsultList = [];
        this.ConsultList = res.data;
      } else {
        this.$message.error("查询失败");
      }

      console.log("222", expandedRows);
    },
    load(tree, treeNode, resolve) {
      console.log(11111111);
    },
    //展示详细信息
    showSysUserById(row) {
      console.log("1111", row);
      this.UserVisitInfo = row;
      this.drawer = true;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    //展开咨询申请表
  async  Apply(scope, row) {
      console.log('000',scope.visitId)
    const { data: res } = await reqGetConsultByVisit(scope.visitId);
     console.log('1111',res)
      if(res.data.length<=8){
        this.AddConsultInfo.stuId = scope.stuId;
      this.AddConsultInfo.stuNum = scope.stuNum;
      this.AddConsultInfo.visitId = scope.visitId;
      this.dialogVisible = true;
      }else{
        this.dialogVisible=false
        this.$notify({
          title: '提示',
          message: '咨询次数过多请线下联系老师',
          duration: 0
        });
      }
    },
    //关闭咨询申请表提交界面
    close() {
      this.dialogVisible = false;
    },
    async addSubmit() {
      console.log("添加咨询", this.AddConsultInfo);
      this.$refs.AddConsultInfo.validate(async (valid) => {
        if (valid) {
          // 发起真正的提交
          const res = await reqAddConsult(this.AddConsultInfo);
          console.log("1111", res);
          if (res.code == 0) {
            this.$message.success("添加成功!");
            // 隐藏添加对话框
            this.dialogVisible = false;
          } else {
            this.$message.error(res.message);
          }
        } else {
          this.$message.error("error submit!!");
          return false;
        }
      });
    },
  },
  mounted() {
    this.GetConsultInfo();
    this.SelectStuConsult();
    // this.GetTeacherList()
  },
};
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  margin-top: 2%;
  margin-left: 3%;
  width: 90%;
}
.el-table /deep/ .warning-row {
  background: oldlace;
}

.el-table /deep/ .success-row {
  background: #f0f9eb;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.container /deep/ .el-drawer.adrawer {
  height: 500px !important;
}
</style>